<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="作业内容">
      <!-- 作业内容 -->
      <div id="content" v-html="formData.content"></div>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="评分" prop="score">
          <el-input
            v-model="formData.score"
            oninput="value=value.replace(/[^\d]/g,'')"
            placeholder="请给作业打分"
            :style="{width: '20%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="评语" prop="comment">
          <el-input
            v-model="formData.comment"
            type="textarea"
            placeholder="请输入评语"
            :autosize="{minRows: 4, maxRows: 4}"
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTaskContentById, writePost } from "@/api/task";
export default {
  inheritAttrs: false,
  components: {},
  props: ["taskId"],
  mounted() {},
  data() {
    return {
      formData: {
        score: 4,
        comment: ""
      },
      rules: {
        field114: [
          {
            required: true,
            message: "评分不能为空",
            trigger: "change"
          }
        ],
        comment: [
          {
            required: true,
            message: "请输入评语",
            trigger: "blur"
          }
        ]
      },
      text: ["B-", "B", "B+", "A-", "A", "A+"],
      rules: {
        score: [
          {
            required: true,
            message: "评分不能为空",
            trigger: "change"
          }
        ],
        comment: [
          {
            required: true,
            message: "请输入评语",
            trigger: "blur"
          }
        ]
      },
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },
  methods: {
    async onOpen() {
      console.log(this.taskId);
      const data = await getTaskContentById(this.taskId);
      const res = data.data.data.data;
      this.formData.id = res.id;
      this.formData.content = res.content;
      this.formData.score = res.score;
      this.formData.comment = res.comment;
      this.formData.sno = res.sno;
      this.formData.taskInfo = res.taskInfo;
      console.log(this.formData);
    },
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    async handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        else this.post();
        // this.close();
      });
    },
    async post() {
      const { data: res } = await writePost(this.formData);
      if (res.code == 20000) {
        this.$notify.success({
          title: "操作成功",
          message: "批改成功"
        });
        // 关闭
        this.close()
        // 清空用户信息
        // this.user = {};
      } else {
        return this.$message.error("批改失败:未知错误6001");
      }
    }
  }
};
</script>
<style scoped>
#content {
  /* 位置设置 */
  width: 75%;
  margin: 0 auto 20px;

  /* 大小设置 */
  min-height: 400px;
  max-height: 400px;

  /* 超出部分设置 */
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;

  /* 边框设置 */
  box-sizing: border-box;
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(
        -45deg,
        rgb(212, 165, 165) 0,
        rgb(201, 188, 188) 25%,
        white 0,
        white 50%
      )
      0/0.6em 0.6em;
  animation: ants 12s linear infinite;
}
.el-rate {
  display: inline-block;
  vertical-align: text-top;
}
</style>
